<template>
    <tm-app class="app" color="#F5F3EF">
        <Navbar :fontSize="40" title="流年吉凶谱" color="#F5F3EF" :shadow="0">
            <template v-slot:right>
                <tm-text @click="handleClear" class="mr-40" :font-size="32" color="#444444" label="一键清空"></tm-text>
            </template>
        </Navbar>
        <view class="container">
            <view class="title">
                <tm-text :font-size="28" color="#444444" label="流年如川，吉凶尽显于此"></tm-text>
            </view>
            <view class="content">
                <YearCard @click="handleOpenYearModal(item)" :item="item" v-for="(item, i) in yearlyFortuneList"
                    :key="i" />
            </view>
        </view>
        <image class="bg" mode="widthFix" :src="year_bg_image"></image>
        <YearModal @change="handleChange" :yearlyFortune="currentYearlyFortune" v-model:show="yearModalShow" />
    </tm-app>
</template>
<script setup lang="ts">
    import { ref, computed, onMounted, getCurrentInstance } from 'vue';
    import Navbar from '@/components/navbar/index.vue';
    import YearCard from './components/YearCard/YearCard.vue';
    import year_bg_image from '/static/assets/images/index/year-bg.png';
    import YearModal from './components/YearModal/YearModal.vue'
    import { useYearlyFortuneStore } from '@/stores/yearlyFortune';
    import { CHANGE_EVENT } from '@/constants/events';
    import dayjs from 'dayjs';
    import { pageLink } from '@/constants/link';

    const yearlyFortuneStore = useYearlyFortuneStore()
    const yearlyFortunes = ref([])
    const yearModalShow = ref(false);
    const currentYearlyFortune = ref({})
    const instance = getCurrentInstance().proxy
    const eventChannel = instance.getOpenerEventChannel();

    const handleOpenYearModal = (item) => {
        yearModalShow.value = true
        currentYearlyFortune.value = item
    }

    const yearlyFortuneList = computed(() => {
        const yearCount = 10
        const currentYear = dayjs()
        return Array.from({ length: yearCount }, (_, index) => {
            const year = dayjs(currentYear).subtract(index, 'year').format('YYYY');
            const fortune = yearlyFortunes.value.find(item => item.date === year) || {}
            return {
                date: year,
                ...fortune
            }
        })
    })

    const handleChange = async () => {
        yearlyFortunes.value = await yearlyFortuneStore.list()
        eventChannel.emit('acceptDataFromOpenedPage', {
            page: pageLink.yearInfo,
            event: CHANGE_EVENT,
        });
    }

    const handleClear = async () => {
        await yearlyFortuneStore.clean()
        yearlyFortunes.value = await yearlyFortuneStore.list()
    }

    onMounted(async () => {
        yearlyFortunes.value = await yearlyFortuneStore.list()
    })
</script>
<style lang="less" scoped>
    .title {
        display: flex;
        justify-content: center;
        margin: 26rpx 0 40rpx;
    }

    .content {
        display: flex;
        flex-wrap: wrap;
        padding: 0 40rpx;
        justify-content: center;

        .year-card {
            width: calc((100% - 120rpx) / 4);
            margin-bottom: 40rpx;

            &:not(:nth-child(4n)) {
                margin-right: 40rpx;
            }

            &:last-child {
                margin-right: 0;
            }
        }
    }

    .app {
        position: relative;
        z-index: 0;
    }

    .bg {
        position: absolute;
        width: 100%;
        bottom: 0;
        left: 0;
        z-index: -1;
    }
</style>